<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>名句详细表[翻译]</title>
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <style>
        body{
            background-image: url("image/background_img.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
        }
    </style>
</head>
<body>
    <header id="header"></header>

    <div class="container" id="detail">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">首页</a></li>
                <li class="breadcrumb-item"><a href="famousSentence.html">名句大全</a></li>
                <li class="breadcrumb-item active" aria-current="page" v-text="sentence">只愿君心似我心，定不负相思意</li>
            </ol>
        </nav>

        <div class="row">
            <div class="col col-sm-12 col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h3 class="card-title" v-text="sentence">只愿君心似我心，定不负相思意</h3>
                        <p>出自<span v-text="poem.chaodai">清朝</span>的《<a :href="'poem.html?'+poem.title" v-text="poem.title">卜算子·我住长江头</a>》</p>
                        <div class="mingju-content" v-html="poem.body">
                            我住长江头，君住长江尾。日日思君不见君，共饮长江水。 <br />此水几时休，此恨何时已。只愿君心似我心，定不负相思意。
                        </div>
                    </div>

                    <div class="card-footer" id="type">
                        <span class="badge badge-secondary"  v-text="poem.type">民谣</span>
                    </div>

                </div>


                <div class="card mt-3" v-for="n in trans">
                    <div class="card-header">
                        <h6 style="font-weight: bolder;color: #dc3545" v-text="n.title" >译文及注释</h6>
                    </div>
                    <div class="card-body" v-html="n.nr">
                        <p><strong>译文一</strong>我居住在长江上游，你居住在长江尾底。日日夜夜想你，却不能见你，你和我啊...同饮一江绿水，两情相爱相知。悠悠不尽的江水什么时候枯竭，别离的苦恨，什么时候消止。只愿你的心，如我的心相守不移，就不会辜负了我一番痴恋情意。</p><p><strong>译文二</strong>我居住在长江上游，你居住在长江下游。 天天想念你却见不到你，共同喝着长江的水。长江之水，悠悠东流，不知道什么时候才能休止，自己的相思离别之恨也不知道什么时候才能停歇。只希望你的心思像我的意念一样， 就一定不会辜负这互相思念的心意。 </p><p><strong>注释</strong>1.选自《姑溪词》，作者李之仪。2. 已：完结,停止3.休：停止4.定：此处为衬字。5.思：想念，思念</p>
                    </div>
                </div>
                <!--<div class="card mt-3">
                    <div class="card-header">
                        <h6>赏析与鉴赏</h6>
                    </div>
                    <div class="card-body">
                        <p>　　词以长江起兴。开头两句，“我”、“君”对起，而一住江头，一住江尾，见双方空间距离之悬隔，也暗寓相思之情的悠长。重叠复沓的句式，加强了咏叹的情味，仿佛可以感触到主人公深情的思念与叹息，在阁中翘首思念的女子形象于此江山万里的悠广背景下凸现出来。</p>
                        <p>　　三、四两句，从前两句直接引出。江头江尾的万里遥隔，引出了“日日思君不见君”这一全词的主干；而同住长江之滨，则引出了“共饮长江水”。如果各自孤立起来看，每一句都不见出色，但联起来吟味，便觉笔墨之外别具一段深情妙理。这就是两句之间含而未宣、任人体味的那层转折。字面意思浅直：日日思君而不得见，却又共饮一江之水。深味之下，似可知尽管思而不见，毕竟还能共饮长江之水。这“共饮”又似乎多少能稍慰相思离隔之恨。词人只淡淡道出“不见”与“共饮”的事实，隐去它们之间的转折关系的内涵，任人揣度吟味，反使词情分外深婉含蕴。</p>
                        <p>　　“此水几时休，此恨何时已。”换头仍紧扣长江水，承上“思君不见”进一步抒写别恨。长江之水，悠悠东流，不知道什么时候才能休止，自己的相思离别之恨也不知道什么时候才能停歇。用“几时休”、“何时已”这样的口吻，一方面表明主观上祈望恨之能已，另一方面又暗透客观上恨之无已。江水永无不流之日，自己的相思隔离之恨也永无销歇之时。此词以祈望恨之能已反透恨之不能已，变民歌、民间词之直率热烈为深挚婉曲，变重言错举为简约含蓄。</p>
                        <p>　　写到这里，词人翻出一层新的意蕴：“只愿君心似我心，定不负相思意。”恨之无已，正缘爱之深挚。“我心”既是江水不竭，相思无已，自然也就希望“君心似我心”，我定不负我相思之意。江头江尾的阻隔纵然不能飞越，而两相挚爱的心灵却一脉遥通。</p>
                        <p>　　全词以江水为抒情线索。悠悠长江水，这样一来，单方面的相思便变为双方的期许，无已的别恨便化为永恒的相爱与期待。这样，阻隔的双方心灵上便得到了永久的滋润与慰藉。从“此恨何时已”翻出“定不负相思意”，江头江尾的遥隔这里反而成为感情升华的条件了。</p>
                        <p>　　以女子的口吻写出了相思之意，把水比喻成绵绵不断的情思。 </p>
                    </div>
                </div>-->
            </div>
        </div>
    </div>

    <footer id="footer"></footer>
</body>
<!--引入jq代码-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入axios 实现页面的异步请求-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    $("#header").load("common/navigation.html")
    $("#footer").load("common/footer.html")


    var name = decodeURI(location.search.split("?")[2])
    console.log(name)
    var gid = location.search.split("?")[1]
    console.log("gid为:"+gid)

    let vm_detail = new Vue({
        el:"#detail",
        data:{
            sentence:"",
            poem:{},
            trans:[]
        },
        created:function () {
            axios({
                url:"/ju/gid/"+gid+"/"+name,
                method:"post"
            }).then(function (r) {
                vm_detail.sentence = r.data
                console.log(JSON.stringify(r.data))
            })
            axios({
                url:"/poems/findId/"+gid,
                method:"post"
            }).then(function (r) {
                vm_detail.poem = r.data
                console.log("古诗内容:"+r.data)
            }).then(function () {
                let arr = $(".badge-secondary").html().split("|");
                console.log("arr["+arr+"]")
                var str = ""
                for (let i = 0; i < arr.length; i++) {
                    str += '<span class="badge badge-secondary">'+arr[i]+'</span>&nbsp;'
                }
                document.getElementById("type").innerHTML = str;
                console.log($(".badge-secondary").html().split("|"))
            })
            axios({
                url:"/trans/"+gid,
                method:"post"
            }).then(function (r) {
                vm_detail.trans = r.data
                console.log(r.data)
                console.log("最后结果为:"+JSON.stringify(r.data))
            })
        }
    })
</script>
</html>